<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="content-wrap bg-F7F8FF">
			<view class="input-item fboxRow Ycenter Xcenter bg-base">
				<view class="fboxCol flex1 Ycenter Xcenter">
					<image @click="goPage" class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-2.png" mode="aspectFill"></image>
					<view class="tit font28 color-main">我要录制</view>
				</view>
				<view class="fboxCol flex1 Ycenter Xcenter">
					<image @click="changeAudio" class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-3.png" mode="aspectFill"></image>
					<view class="tit font28 color-main">上传音频</view>
				</view>
			</view>
			<view class="input-tips fboxRow Ycenter font24 color-969699">注：录制音频和上传音频，两者只能选其一。</view>
		</view>
		<!-- <view class="fixed-space"></view> -->
		<!-- <view class="fixed-bottom fboxRow Ycenter Xcenter">
			<view class="fixed-btn flex1 fboxRow Ycenter Xcenter font28 color-FFF bg-main" @click="verifyTap">保存</view>
		</view> -->
	</view>
</template>

<script>
import { strTrim } from '@/static/js/common.js';
import { fileUploadAnon } from '@/api/index.js';
import { cardVoiceExamination, cardVoiceUpdate } from '@/api/card.js';
export default {
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			isAudio: false
		};
	},
	methods: {
		goPage() {
			// #ifdef H5
			uni.showToast({
				icon: 'none',
				title: '浏览器暂不支持'
			});
			// #endif
			// #ifdef MP-WEIXIN || MP-TOUTIAO
			this.$pageTo('/mine/edit/audioTranscribe');
			// #endif
		},
		changeAudio() {
			// #ifdef H5
			//选择音频文件
			uni.chooseFile({
				count: 1, //选取的文件个数限制
				extension: ['.mp3'], //可定义允许哪些后缀的文件可被选择
				success: res => {
					let tempFilePaths = res.tempFiles[0];
					console.log(tempFilePaths);
					const name = tempFilePaths.name || tempFilePaths.path;
					if (name.indexOf('.mp3') == name.length - 4) {
						this.uploadAudio(tempFilePaths);
					} else {
						uni.showToast({
							icon: 'none',
							title: '请选择MP3文件'
						});
					}
				}
			});
			// #endif
			// #ifdef MP-TOUTIAO
			uni.showToast({
				icon: 'none',
				title: '抖音小程序暂不支持'
			});
			// #endif
			// #ifdef MP-WEIXIN
			// 从微信聊天消息中选择文件
			wx.chooseMessageFile({
				count: 1, //选取的文件个数限制
				type: 'file', //可定义允许哪些后缀的文件可被选择
				// extension: ["mp3","m4a"],
				success: res => {
					let tempFilePaths = res.tempFiles[0];
					const name = tempFilePaths.name || tempFilePaths.path;
					if (name.indexOf('.mp3') == name.length - 4 || name.indexOf('.m4a') == name.length - 4) {
						this.uploadAudio(tempFilePaths);
					} else {
						uni.showToast({
							icon: 'none',
							title: '请选择MP3/M4A文件'
						});
					}
				}
			});
			// 从文件里面选择
			// wx.chooseMedia({
			// 	count: 1, // 可选文件数量。因为是头像上传，只一个文件就可
			// 	// mediaType: ["image"], // 文件类型：这里只是图片，其他使用看官网
			// 	success: res => {
			// 		console.log(res)
			// 	  // this.uploadFile(res.tempFiles[0]); // 返回的数据里有我们后面上传需要的文件，保存下来
			// 	},
			// 	fail: err => {
			// 	  console.log(err, "personal.js >>>> 个人资料 上传头像")
			// 	}
			//  })
			// #endif
		},
		// 上传音频
		uploadAudio(file) {
			// 上传音频文件
			uni.showLoading({
				title: '上传中...'
			});
			fileUploadAnon(file)
				.then(res => {
					if (res.data) {
						// 验证音频是否合格
						cardVoiceExamination({ voiceUrl: res.data.url })
							.then(eres => {
								if (eres.data) {
									cardVoiceUpdate({ customVoiceUrl: res.data.url })
										.then(res => {
											if (res.data) {
												let pages = getCurrentPages(); // 当前页面
												let beforePage = pages[pages.length - 3]; // 前一个页面
												uni.navigateBack({
													delta: 1,
													success: function() {
														beforePage.$vm.getVoice({ customVoiceUrl: res.data.url }); // 执行前一个页面的刷新
													}
												});
											}
										})
										.finally(() => {
											uni.hideLoading();
										});
								}
							})
							.catch(() => {
								uni.hideLoading();
							});
					}
				})
				.catch(() => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content-wrap {
	height: calc(100vh);
}
.input-item {
	padding: 0 40rpx;
	height: 285rpx;
}
.icon {
	width: 102rpx;
	height: 102rpx;
}
.tit {
	margin-top: 16rpx;
}

.input-tips {
	padding: 15rpx 40rpx;
	line-height: 32rpx;
}
</style>
